<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.keyword"
                placeholder="输入关键词或ID搜索"
                style="width: 200px;"
                class="filter-item" />
      <el-button 
                 class="filter-item"
                 type="primary"
                 icon="el-icon-search"
                 @click="filterHandle">
        查询
      </el-button>
    </div>

    <el-card>
      <el-button type="warning"
                 icon="el-icon-plus"
                 @click.stop="$router.push({ path: '/product/category/create' })">添加类目</el-button>
    </el-card>

    <el-table v-loading="listLoading"
              :data="list"
              fit
              highlight-current-row
              style="width: 100%;">

      <el-table-column label="编号"
                       prop="id"
                       align="center"
                       width="100"></el-table-column>

      <el-table-column label="类目名称"
                       prop="name">
        <template slot-scope="{row}">
          <router-link :to="`/product/category/edit/${row.id}` "
                       class="link-type">
            <span>{{ row.name }}</span>
          </router-link>
        </template>
      </el-table-column>


      <el-table-column label="加入时间"
                       prop="created_at">
                       <template slot-scope="{row}">
                        {{ row.created_at | createdTimeFilter}}
                       </template>
      </el-table-column>

      <el-table-column label="描述"
                       prop="description"
                       min-width="150px">
        <template slot-scope="{row}">
          <el-tooltip v-if="row.description && row.description.length>20"
                      :content="row.description"
                      placement="bottom-start">
            <span>{{`${row.description.substring(0,20)}...`}}</span>
          </el-tooltip>
          <span v-else>{{row.description || '暂无'}}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态"
                       prop="status"
                       class-name="status-col">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status==1?'已启用':'未启用' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作"
                       min-width="150"
                       class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">

          <el-button @click="switchCate(row)"
                     v-if="row.status==0"
                     size="mini"
                     type="success">启用</el-button>
          <el-button @click="switchCate(row)"
                     v-if="row.status==1"
                     size="mini"
                     type="warning">禁用</el-button>
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-edit"
                     @click.stop="$router.push({ path: `/product/category/edit/${row.id}` })" />
          <el-button v-if="row.status==0"
                     @click.stop="deleteCate(row,$index)"
                     size="mini"
                     icon="el-icon-delete"
                     type="danger" />
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.page_size"
                @pagination="getList" />
  </div>
</template>

<script>
// import {getCateList, switchCateStatus, delCate, setCateSort} from '@/api/product'
import {getCateList,switchCateStatus,delCate} from '@/api/hopeTravel/category'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { fromTextArea } from 'codemirror'

export default {
  name: 'CateList',
  components: {Pagination},
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
      }
      return statusMap[status]
    },
    createdTimeFilter(val){
      let reg = /(.*)(?=T)/
      return val.match(reg)[0]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 10,
        keyword: '',
      },
      currentSort: '',
    }
  },
  watch: {
    'listQuery.keyword':{
      handler(newVal,oldVal){
        if(newVal==""){
          this.getList()
        }
      },
      immediate:true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getCateList(this.listQuery).then(res => {
        this.list = res.data
        this.total = res.total[0][`COUNT(*)`]
        this.listLoading = false
      })
    },
    filterHandle() {
      this.$set(this.listQuery)
      this.getList()
    },
    //启用/禁用
    switchCate(row) {
      switchCateStatus(row.id, {status: row.status == 0 ? 1 : 0}).then(res => {
        this.$notify({
          message: '操作成功',
          type: 'success',
          duration: 2000,
        })
        this.getList()
      })
    },
    //保存当前聚焦的排序值->供watch使用
    saveCurrentSort(e) {
      this.currentSort = e.target.value
    },
    //修改排序
    changeSort(e, row) {
      console.log(e)
      if (!e.target.value.trim()) {
        this.$set(row, 'sort', this.currentSort)
        return
      }
      if (this.currentSort == e.target.value) return
      setCateSort(row.id, {sort: parseInt(e.target.value)}).then(res => {
        this.$notify({
          message: '排序修改成功',
          type: 'success',
          duration: 2000,
        })
        this.getList()
      })
    },
    //删除分类
    deleteCate(row, index) {
      this.$confirm('此操作将永久删除该类目, 是否继续?', '提示', {
        type: 'warning',
      }).then(() => {
        delCate(row.id).then(res => {
          this.list.splice(index, 1)
          this.$notify({
            message: '删除成功',
            type: 'success',
            duration: 2000,
          })
        })
      })
    },
  },
}
</script>

<style>
.input-new-sort .el-input__inner {
  padding: 0;
  text-align: center;
}
</style>
<style lang="scss" scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.input-new-sort {
  width: 80px;
}
</style>
